import { html } from "htm/preact";

import {
  TextFieldEntry,
  isTextFieldEntryEdited,
} from "@bpmn-io/properties-panel";
import { useService } from "bpmn-js-properties-panel";

export default function (element) {
  return [
    {
      id: "spell",
      element,
      component: Spell,
      isEdited: isTextFieldEntryEdited,
    },
  ];
}

function Spell(props) {
  const { element, id } = props;

  const modeling = useService("modeling");
  const translate = useService("translate");
  const debounce = useService("debounceInput");

  const getValue = () => {
    return element.businessObject.spell || "";
  };

  const setValue = (value) => {
    return modeling.updateProperties(element, {
      spell: value,
    });
  };

  return html`<${TextFieldEntry}
    id=${id}
    element=${element}
    description=${ translate('Apple a black magic spell')}
    label=${ translate('Spell')}
    getValue=${getValue}
    setValue=${setValue}
    debounce=${debounce}
    tooltip=${translate("Check availabel spells in the spellbook")}
  />`
}
